<template>
  <div>
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="班级列表">
            <el-select v-model="formInline.grade" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考试列表">
            <el-select v-model="formInline.testNames" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="科目">
            <el-select v-model="formInline.subject" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="ondata">班级数据对比</el-button>
          </el-form-item>
        </el-form>
      </el-header>

      <el-main>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column
            prop="number"
            label="学号"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          ></el-table-column>
          <el-table-column prop="grade" label="成绩"></el-table-column>
          <el-table-column prop="pgrade" label="班级平均成绩"></el-table-column>
        </el-table>
      </el-main>

      <el-footer>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5]"
            :page-size="size"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      messagess: "",
      options1: [],
      options2: [],
      options3: [],
      value: "",

      tableData: [],

      formInline: {
        grade: "1",
        testNames: "高一上第一次月考",
        subject: "chinese",
      },
      size: 5,
      total: 0,
      currentPage: 1,
    };
  },

  methods: {
    //查询
    onSubmit() {
      axios
        .get("http://localhost:8080/selectStuData1", {
          params: {
            grades: this.formInline.grade,
            testNames: this.formInline.testNames,
            subject: this.formInline.subject,
            pageindex: "1",
          },
        })
        .then((resp) => {
          if (resp.status == 200) {
            this.tableData = eval(resp.data.studata);
            //this.currentPage = resp.data.totalPage;
            this.total = resp.data.totalRecord;
          } else {
            this.messagess = "数据异常";

            this.open();
          }
        });
    },
    //弹框
    open() {
      this.$alert(this.messagess, "消息提示", {
        confirmButtonText: "确定",
      });
    },
    //
    ondata() {
      this.$router.push({
        path: "/a",
        name: "数据对比",
        params: {
          grades: this.formInline.grade,
          testNames: this.formInline.testNames,
          subject: this.formInline.subject,
        },
      });
    },

    //页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      axios
        .get("http://localhost:8080/selectStuData1", {
          params: {
            grades: this.formInline.grade,
            testNames: this.formInline.testNames,
            subject: this.formInline.subject,
            pageindex: String(val),
          },
        })
        .then((resp) => {
          this.tableData = eval(resp.data.studata);
        });
    },

    selectdata() {
      axios
        .get("http://localhost:8080/selectStuData", {
          params: {},
        })
        .then((resp) => {
          console.log(resp.data.gradeclass);
          var tmp1 = eval(resp.data.gradeclass);
          this.options1 = tmp1;
          var tmp2 = eval(resp.data.testName);
          this.options2 = tmp2;
          var tmp3 = eval(resp.data.subject);
          this.options3 = tmp3;
        });
    },
  },
  created() {
    this.selectdata();
  },
};
</script>

<style scoped>
</style>
